// 文章详情页面JS

document.addEventListener('DOMContentLoaded', function() {
    // 解析URL参数并加载相应内容
    loadContentByUrlParams();
    
    // 初始化页面功能
    initBackButton();
    initShareButton();
    initFollowButton();
    initLikeButtons();
    initReplyButtons();
    initCommentInput();
    initArticleLinks();
    
    // 初始化底部导航
    initTabBar();
    
    // 处理图片加载错误
    handleImageErrors();
});

// 解析URL参数并加载对应内容
function loadContentByUrlParams() {
    // 获取URL参数
    const urlParams = new URLSearchParams(window.location.search);
    const articleId = urlParams.get('id') || 'default';
    const articleType = urlParams.get('type') || 'article';
    
    console.log(`加载内容: ID=${articleId}, 类型=${articleType}`);
    
    // 根据文章类型和ID加载不同内容
    if (articleType === 'tips') {
        // 如果是求职干货类型的文章
        loadTipsContent(articleId);
    } else {
        // 默认文章类型
        loadArticleContent(articleId);
    }
    
    // 更新页面标题
    updatePageTitle(articleType);
}

// 加载求职干货内容
function loadTipsContent(tipsId) {
    // 定义求职干货内容数据
    const tipsData = {
        'resume_tips': {
            title: '如何在简历中突出项目经历',
            author: '简历优化师Tom',
            authorAvatar: '../img/avatar1.jpg',
            category: '简历技巧',
            coverImage: '../img/tips1.jpg',
            content: `
                <h2>为什么项目经历在简历中如此重要？</h2>
                <p>在简历筛选过程中，HR和面试官通常会花费大量时间关注应聘者的项目经历部分。这是因为项目经历能够直观展示你的实际工作能力、解决问题的方法和团队协作能力。一个详实而有亮点的项目经历描述，往往是你获得面试机会的关键因素。</p>
                
                <h2>项目经历描述的STAR法则</h2>
                <p>在描述项目经历时，我推荐使用STAR法则，这是一种结构化的方法来呈现你的经历：</p>
                <ul>
                    <li><strong>Situation（情境）</strong>：简要描述项目背景和你所在的环境</li>
                    <li><strong>Task（任务）</strong>：明确指出你在项目中的具体职责和需要完成的任务</li>
                    <li><strong>Action（行动）</strong>：详细说明你采取了哪些具体行动来完成任务</li>
                    <li><strong>Result（结果）</strong>：强调你的行动带来的具体成果和影响</li>
                </ul>
                
                <h2>项目经历描述中的常见错误</h2>
                <p>在我多年的HR和简历顾问经验中，发现求职者在写项目经历时常犯以下错误：</p>
                <ol>
                    <li>只描述项目是什么，而不说明自己做了什么</li>
                    <li>使用过多专业术语而缺乏可量化的成果</li>
                    <li>项目描述过于冗长，没有突出重点</li>
                    <li>缺乏个人贡献的体现，让人无法评估你的实际能力</li>
                </ol>
                
                <h2>如何用数据量化项目成果</h2>
                <p>在描述项目成果时，尽可能使用具体的数据来量化你的贡献。例如：</p>
                <ul>
                    <li>"优化了网站性能" → "将网站加载时间减少了40%，从3.5秒降至2.1秒"</li>
                    <li>"提高了用户转化率" → "通过重新设计注册流程，将转化率提升了25%"</li>
                    <li>"减少了系统故障" → "将系统故障率从每月5次降低到每季度1次以下"</li>
                </ul>
                
                <h2>写在最后</h2>
                <p>项目经历是展示你实际能力的窗口，用心打磨这一部分将大大提高你的简历通过率。记住，HR更看重的是你在项目中的具体贡献和解决问题的能力，而不仅仅是你参与过什么项目。</p>
            `
        },
        'interview_tips': {
            title: '大厂面试常见问题及应对策略',
            author: '资深面试官李明',
            authorAvatar: '../img/avatar2.jpg',
            category: '面试技巧',
            coverImage: '../img/tips2.jpg',
            content: `
                <h2>准备大厂面试的关键策略</h2>
                <p>大型科技公司的面试通常会更加系统化和严格，涵盖技术能力、解决问题能力、团队协作能力等多个维度。本文将分享一些顶级科技公司常见的面试问题类型以及应对策略。</p>
                
                <h2>1. 自我介绍的艺术</h2>
                <p>几乎所有面试都会以"请简单介绍一下自己"开始。这看似简单，却是展示个人价值的重要机会。</p>
                <p><strong>常见误区：</strong></p>
                <ul>
                    <li>照搬简历内容，缺乏亮点</li>
                    <li>过于冗长，缺乏重点</li>
                    <li>未针对应聘岗位进行调整</li>
                </ul>
                
                <p><strong>推荐策略：</strong></p>
                <ul>
                    <li>控制在1-2分钟内，突出与岗位相关的经历</li>
                    <li>遵循"过去-现在-未来"的结构，展示清晰的职业发展脉络</li>
                    <li>准备1-2个令你与众不同的亮点或成就</li>
                </ul>
                
                <h2>2. 行为面试问题(STAR法则)</h2>
                <p>"请描述一个你解决的复杂问题"、"分享一次你与团队成员有冲突的经历"等问题都属于行为面试问题。</p>
                
                <p><strong>应对策略：</strong></p>
                <ul>
                    <li>准备5-8个具体案例，涵盖团队协作、解决问题、领导力等不同维度</li>
                    <li>使用STAR法则（情境-任务-行动-结果）结构化你的回答</li>
                    <li>强调你的个人贡献和学到的经验教训</li>
                </ul>
                
                <h2>3. 技术问题的解题思路</h2>
                <p>大厂技术面往往侧重考察解题思路而非答案本身。</p>
                
                <p><strong>应对要点：</strong></p>
                <ul>
                    <li>先理解问题，复述需求确保理解无误</li>
                    <li>思考多种解决方案，并分析各自优缺点</li>
                    <li>选择最优方案并解释理由</li>
                    <li>考虑边界情况和可能的优化点</li>
                </ul>
                
                <h2>4. 压力型问题</h2>
                <p>"为什么我们应该录用你？"、"你最大的缺点是什么？"等问题旨在测试你的抗压能力和自我认知。</p>
                
                <p><strong>应对策略：</strong></p>
                <ul>
                    <li>保持冷静，不急于回答</li>
                    <li>展示自信但不自大</li>
                    <li>讲述真实的缺点，但同时展示你正在如何改进</li>
                </ul>
                
                <h2>面试结束前的提问</h2>
                <p>面试官通常会在结束前问"你有什么问题要问我"，这是展示你对公司兴趣和洞察力的好机会。</p>
                
                <p><strong>高质量问题示例：</strong></p>
                <ul>
                    <li>"团队在未来6-12个月内面临的最大挑战是什么？"</li>
                    <li>"这个岗位的成功标准是什么？"</li>
                    <li>"公司如何支持员工的职业发展和学习？"</li>
                </ul>
                
                <h2>写在最后</h2>
                <p>大厂面试不仅是对技能的考察，更是对综合素质的全面评估。通过充分准备和刻意练习，你可以大幅提高面试成功率。记住，面试是双向选择的过程，展示真实的自己，找到最适合你的机会。</p>
            `
        }
    };
    
    // 检查是否有对应ID的内容
    if (tipsData[tipsId]) {
        const data = tipsData[tipsId];
        
        // 更新页面内容
        document.querySelector('.article-title').textContent = data.category;
        document.title = `${data.title} - 人才职业生涯规划平台`;
        
        // 更新文章主标题
        const articleTitle = document.querySelector('.article-title');
        if (articleTitle) {
            articleTitle.textContent = data.category;
        }
        
        // 更新文章内容标题
        const contentTitle = document.querySelector('.article-header h1');
        if (contentTitle) {
            contentTitle.textContent = data.title;
        }
        
        // 更新作者信息
        const authorName = document.querySelector('.author-info .author-data .author-name');
        if (authorName) {
            authorName.textContent = data.author;
        }
        
        // 更新作者头像
        const authorAvatar = document.querySelector('.author-info .author-avatar');
        if (authorAvatar) {
            authorAvatar.src = data.authorAvatar;
        }
        
        // 更新封面图片
        const coverImage = document.querySelector('.article-banner');
        if (coverImage) {
            coverImage.src = data.coverImage;
        }
        
        // 更新文章内容
        const articleContent = document.querySelector('.content-text');
        if (articleContent) {
            articleContent.innerHTML = data.content;
        }
    } else {
        console.error(`未找到ID为${tipsId}的求职干货内容`);
    }
}

// 加载普通文章内容
function loadArticleContent(articleId) {
    // 文章内容数据
    const articlesData = {
        'art101': {
            title: '如何准备技术面试：来自Google面试官的建议',
            author: 'Google技术面试官 张明',
            authorAvatar: '../img/avatar1.jpg',
            category: '面试技巧',
            coverImage: '../img/article1.jpg',
            content: `
                <h2>技术面试前的准备工作</h2>
                <p>技术面试是开发者求职过程中最关键的环节之一。作为一名在Google负责技术面试多年的面试官，我发现很多候选人在准备面试时存在一些误区，导致未能充分展示自己的能力。本文将分享一些高效的技术面试准备策略。</p>
                
                <h2>1. 掌握算法与数据结构基础</h2>
                <p>无论是Google、Facebook还是其他科技公司，算法和数据结构始终是技术面试的核心部分。重点关注以下方面：</p>
                <ul>
                    <li>数组、链表、栈、队列等基础数据结构</li>
                    <li>树、图、哈希表等高级数据结构</li>
                    <li>排序、搜索、动态规划等常见算法</li>
                    <li>时间和空间复杂度分析</li>
                </ul>
                <p>推荐每天解决1-2道算法题，特别是LeetCode上的中等难度题目，这些题目很好地模拟了实际面试中可能遇到的问题。</p>
                
                <h2>2. 系统设计能力提升</h2>
                <p>对于有经验的开发者，系统设计题是区分优秀候选人的关键环节。准备系统设计面试时，需要考虑：</p>
                <ul>
                    <li>可扩展性：系统如何应对用户增长</li>
                    <li>容错性：当部分组件失败时如何保持系统运行</li>
                    <li>一致性与可用性的权衡</li>
                    <li>常见的分布式系统模式</li>
                </ul>
                <p>练习设计常见系统，如URL缩短服务、社交网络feed流、在线聊天应用等。</p>
                
                <h2>3. 项目经验的结构化表达</h2>
                <p>技术面试中，我们不仅关注候选人的编码能力，还会评估其解决实际问题的经验。准备3-5个项目案例，每个案例应包含：</p>
                <ul>
                    <li>项目背景与挑战</li>
                    <li>你的具体贡献与技术选型理由</li>
                    <li>遇到的技术难点及解决方案</li>
                    <li>项目成果与收获的经验</li>
                </ul>
                <p>记住，选择那些能体现你技术深度与问题解决能力的项目，而非简单的CRUD应用。</p>
                
                <h2>4. 面试当天的注意事项</h2>
                <p>面试当天的表现同样重要，以下是一些实用建议：</p>
                <ul>
                    <li>思考过程要清晰可见，边思考边讲解</li>
                    <li>从简单解法开始，逐步优化</li>
                    <li>主动分析解法的时间和空间复杂度</li>
                    <li>提前准备问题清单，在面试结束时提问</li>
                </ul>
                
                <h2>总结</h2>
                <p>技术面试不仅是考察你的编码能力，更是评估你作为工程师的综合素质。通过系统化、持续性的准备，加上面试中的正确策略，你将大大提高成功的几率。祝你面试顺利！</p>
            `
        },
        'art102': {
            title: '2023年最受欢迎的职业排行榜及薪资分析',
            author: '职业分析师 李华',
            authorAvatar: '../img/avatar2.jpg',
            category: '职场趋势',
            coverImage: '../img/article2.jpg',
            content: `
                <h2>2023年就业市场概览</h2>
                <p>随着数字化转型加速、AI技术崛起以及后疫情时代的经济复苏，2023年的就业市场正经历着深刻变革。本文基于最新的就业数据和行业报告，分析今年最受欢迎的职业及其薪资趋势。</p>
                
                <h2>1. 人工智能工程师</h2>
                <p><strong>平均薪资：</strong>30-50万元/年</p>
                <p><strong>需求增长率：</strong>135%（同比2022年）</p>
                <p><strong>热门方向：</strong>大模型微调、AI应用开发、机器学习工程</p>
                <p>随着ChatGPT等大型语言模型的爆发式增长，AI工程师的需求正处于历史高位。尤其是能够将AI技术落地到具体应用场景的工程师最为抢手。主要招聘方包括大型科技公司、AI创业公司及传统行业的数字化部门。</p>
                
                <h2>2. 网络安全专家</h2>
                <p><strong>平均薪资：</strong>25-45万元/年</p>
                <p><strong>需求增长率：</strong>82%</p>
                <p><strong>热门方向：</strong>云安全、应用安全、安全架构</p>
                <p>随着网络攻击日益复杂化和数据价值的提升，网络安全人才的短缺正变得越来越明显。特别是具备云环境安全经验的专业人士，几乎不存在失业的可能性。</p>
                
                <h2>3. 数据科学家</h2>
                <p><strong>平均薪资：</strong>25-40万元/年</p>
                <p><strong>需求增长率：</strong>65%</p>
                <p><strong>热门方向：</strong>数据分析、预测建模、商业智能</p>
                <p>数据驱动决策已成为企业标配，因此能够从海量数据中提取有价值见解的数据科学家备受追捧。具备行业知识与数据技能的复合型人才尤其稀缺。</p>
                
                <h2>4. 全栈开发工程师</h2>
                <p><strong>平均薪资：</strong>20-40万元/年</p>
                <p><strong>需求增长率：</strong>58%</p>
                <p><strong>热门技术栈：</strong>React/Node.js、Java全栈、Python+前端</p>
                <p>在资源精简的趋势下，能够同时处理前后端开发的全栈工程师需求量持续增加。尤其是具备微服务架构和DevOps经验的全栈开发者更具竞争力。</p>
                
                <h2>5. 产品经理</h2>
                <p><strong>平均薪资：</strong>18-35万元/年</p>
                <p><strong>需求增长率：</strong>42%</p>
                <p><strong>热门方向：</strong>AI产品、用户增长、B端产品</p>
                <p>随着产品复杂度增加和用户体验要求提高，优秀的产品经理正成为企业争夺的焦点。特别是能够理解AI技术并将其应用到产品中的产品经理更是稀缺。</p>
                
                <h2>薪资影响因素分析</h2>
                <p>研究发现，影响以上职业薪资水平的关键因素包括：</p>
                <ol>
                    <li><strong>技术深度与广度：</strong>掌握多种相关技术栈的人才薪资普遍高出20-30%</li>
                    <li><strong>行业经验：</strong>特定行业（如金融、医疗）的领域知识可提升薪资15-25%</li>
                    <li><strong>解决复杂问题的能力：</strong>有大规模系统开发经验的工程师薪资溢价显著</li>
                    <li><strong>软技能：</strong>沟通能力、团队协作等软技能对高级职位的薪资影响达10-15%</li>
                </ol>
                
                <h2>职业发展建议</h2>
                <p>基于当前就业市场趋势，给求职者的几点建议：</p>
                <ul>
                    <li>持续学习AI相关技能，无论你处于哪个领域</li>
                    <li>培养跨学科能力，单一技术专长的职业天花板越来越明显</li>
                    <li>关注新兴行业如清洁能源、数字健康等领域的就业机会</li>
                    <li>投资软技能发展，尤其是在远程工作环境下的协作能力</li>
                </ul>
                
                <p>就业市场瞬息万变，持续学习和适应能力将是2023年及未来职场成功的关键。</p>
            `
        },
        'art103': {
            title: '求职简历制作指南：HR眼中的加分项',
            author: '资深HR总监 王菲',
            authorAvatar: '../img/avatar3.jpg',
            category: '求职技巧',
            coverImage: '../img/article3.jpg',
            content: `
                <h2>简历：你的职场敲门砖</h2>
                <p>在竞争激烈的就业市场中，一份出色的简历能让你在众多应聘者中脱颖而出。作为一名拥有15年招聘经验的HR总监，我每年要审阅上千份简历，深知什么样的简历会吸引招聘者的目光。本文将分享如何打造一份专业、有竞争力的简历。</p>
                
                <h2>1. 简历格式与结构</h2>
                <p>一份专业的简历首先要有清晰的结构和易读的格式：</p>
                <ul>
                    <li><strong>长度控制：</strong>应届生控制在1页内，有经验的专业人士控制在1-2页</li>
                    <li><strong>字体选择：</strong>使用专业、易读的字体，如微软雅黑、思源黑体等</li>
                    <li><strong>留白设计：</strong>适当的留白能提高简历的可读性</li>
                    <li><strong>一致的格式：</strong>日期、标题、小标题等元素格式保持一致</li>
                </ul>
                <p>值得注意的是，不同行业对简历格式的偏好有所不同。创意行业可以更个性化，而金融、法律等传统行业则偏好保守典雅的风格。</p>
                
                <h2>2. 个人信息与摘要</h2>
                <p>简历顶部是招聘者首先看到的部分，应包含：</p>
                <ul>
                    <li>姓名和联系方式（电话、邮箱、LinkedIn）</li>
                    <li>职业摘要或目标（3-5行精炼描述，突出你的专业定位和核心优势）</li>
                </ul>
                <p>避免包含年龄、性别、婚姻状况等与工作能力无关的信息，这些信息容易导致无意识偏见。</p>
                
                <h2>3. 工作经历的黄金法则</h2>
                <p>工作经历是简历的核心部分，HR平均花费60%的时间关注这部分内容：</p>
                <ul>
                    <li><strong>成就导向：</strong>不仅列出你做了什么，更要强调你取得的成果</li>
                    <li><strong>数据量化：</strong>尽可能用数据说话，如"提高用户转化率30%"</li>
                    <li><strong>行动动词：</strong>每个要点以强有力的行动动词开头，如"领导"、"优化"、"实施"</li>
                    <li><strong>相关性筛选：</strong>突出与目标职位最相关的经历，弱化无关内容</li>
                </ul>
                <p>工作经历按时间倒序排列，每段经历包含公司名称、职位、在职时间和主要职责/成就。</p>
                
                <h2>4. 技能展示的策略</h2>
                <p>技能部分需要根据职位需求有针对性地展示：</p>
                <ul>
                    <li>将技能分类展示，如技术技能、软技能、语言能力等</li>
                    <li>标明熟练程度，可使用进度条或描述性文字</li>
                    <li>优先列出职位描述中提到的关键技能</li>
                    <li>避免列出基础或过时的技能（如Word基础操作、过时编程语言）</li>
                </ul>
                
                <h2>5. 教育背景与证书</h2>
                <p>对于应届毕业生，教育部分可以放在前面；有工作经验的求职者则应将其放在工作经历之后：</p>
                <ul>
                    <li>列出学历、学校、专业和毕业时间</li>
                    <li>如果GPA优异（3.5以上），可以标注</li>
                    <li>只列出与求职相关的证书和培训</li>
                </ul>
                
                <h2>6. ATS友好性优化</h2>
                <p>大多数大中型企业使用申请追踪系统(ATS)初筛简历，为了确保你的简历顺利通过：</p>
                <ul>
                    <li>使用标准简历格式，避免复杂的表格和图形</li>
                    <li>包含职位描述中的关键词</li>
                    <li>使用标准的标题（如"工作经验"而非"职业之旅"）</li>
                    <li>将简历保存为PDF或Word格式</li>
                </ul>
                
                <h2>常见错误与规避方法</h2>
                <p>以下是简历中最常见的一些减分项：</p>
                <ul>
                    <li>拼写和语法错误（建议让至少两人校对）</li>
                    <li>过度使用专业术语和缩写</li>
                    <li>包含虚假或夸大的信息</li>
                    <li>使用通用模板而未个性化调整</li>
                </ul>
                
                <h2>结语</h2>
                <p>一份优秀的简历不仅是你经历和能力的总结，更是你专业态度的体现。它应该清晰、准确、有针对性地展示你与目标职位的匹配度。记住，简历的目标不是让你获得工作，而是帮你获得面试机会。投入足够时间打磨你的简历，这是职业发展道路上值得的投资。</p>
            `
        }
    };
    
    // 检查是否有对应ID的文章内容
    if (articlesData[articleId]) {
        const data = articlesData[articleId];
        
        // 更新页面标题
        document.title = `${data.title} - 人才职业生涯规划平台`;
        
        // 更新文章主标题
        const articleTitle = document.querySelector('.article-title');
        if (articleTitle) {
            articleTitle.textContent = data.category;
        }
        
        // 更新文章内容标题
        const contentTitle = document.querySelector('.article-header h1');
        if (contentTitle) {
            contentTitle.textContent = data.title;
        }
        
        // 更新作者信息
        const authorName = document.querySelector('.author-info .author-data .author-name');
        if (authorName) {
            authorName.textContent = data.author;
        }
        
        // 更新作者头像
        const authorAvatar = document.querySelector('.author-info .author-avatar');
        if (authorAvatar) {
            authorAvatar.src = data.authorAvatar;
        }
        
        // 更新封面图片
        const coverImage = document.querySelector('.article-banner');
        if (coverImage) {
            coverImage.src = data.coverImage;
        }
        
        // 更新文章内容
        const articleContent = document.querySelector('.content-text');
        if (articleContent) {
            articleContent.innerHTML = data.content;
        }
    } else {
        console.error(`未找到ID为${articleId}的文章内容`);
    }
}

// 更新页面标题
function updatePageTitle(articleType) {
    // 根据文章类型更新页面标题
    let pageTitle = '文章详情';
    
    if (articleType === 'tips') {
        pageTitle = '求职干货';
    }
    
    // 更新浏览器标题
    document.title = pageTitle + ' - 人才职业生涯规划平台';
}

// 返回按钮功能
function initBackButton() {
    const backBtn = document.querySelector('.back-btn');
    
    if (backBtn) {
        backBtn.addEventListener('click', function() {
            // 先检查是否有历史记录
            if (window.history.length > 1) {
                window.history.back();
            } else {
                // 如果没有历史记录，返回发现页
                window.location.href = 'discover.html';
            }
        });
    }
}

// 分享按钮功能
function initShareButton() {
    const shareBtn = document.querySelector('.action-btns i.bi-share');
    
    if (shareBtn) {
        shareBtn.addEventListener('click', function() {
            // 获取当前文章标题
            const title = document.querySelector('.article-title').textContent;
            
            // 如果浏览器支持网页分享API
            if (navigator.share) {
                navigator.share({
                    title: title,
                    text: '分享一篇关于AI产业的好文章',
                    url: window.location.href
                })
                .then(() => console.log('分享成功'))
                .catch((error) => console.log('分享失败:', error));
            } else {
                // 不支持分享API，显示提示
                showToast('复制链接成功，快去分享吧');
                
                // 复制当前URL到剪贴板
                const dummyInput = document.createElement('input');
                document.body.appendChild(dummyInput);
                dummyInput.value = window.location.href;
                dummyInput.select();
                document.execCommand('copy');
                document.body.removeChild(dummyInput);
            }
        });
    }
}

// 关注按钮功能
function initFollowButton() {
    const followBtn = document.querySelector('.follow-btn');
    
    if (followBtn) {
        followBtn.addEventListener('click', function() {
            // 切换关注状态
            if (this.textContent === '+ 关注') {
                this.textContent = '已关注';
                this.style.backgroundColor = 'rgba(63, 81, 181, 0.2)';
                showToast('关注成功');
            } else {
                this.textContent = '+ 关注';
                this.style.backgroundColor = 'rgba(63, 81, 181, 0.1)';
                showToast('已取消关注');
            }
        });
    }
}

// 点赞按钮功能
function initLikeButtons() {
    const likeButtons = document.querySelectorAll('.like-btn');
    
    likeButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // 获取当前点赞数
            const likeText = this.textContent.trim();
            let likeCount = parseInt(likeText.match(/\d+/)[0]);
            
            // 判断是否已点赞（通过检查按钮颜色）
            if (this.classList.contains('liked')) {
                // 已点赞，取消点赞
                likeCount--;
                this.innerHTML = `<i class="bi bi-hand-thumbs-up"></i> ${likeCount}`;
                this.classList.remove('liked');
                this.style.color = 'var(--gray-color)';
            } else {
                // 未点赞，添加点赞
                likeCount++;
                this.innerHTML = `<i class="bi bi-hand-thumbs-up-fill"></i> ${likeCount}`;
                this.classList.add('liked');
                this.style.color = 'var(--primary-color)';
            }
        });
    });
}

// 回复按钮功能
function initReplyButtons() {
    const replyButtons = document.querySelectorAll('.reply-btn');
    
    replyButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // 获取评论用户名
            const userName = this.closest('.comment-item').querySelector('.user-name').textContent;
            
            // 设置评论框内容和焦点
            const commentInput = document.querySelector('.comment-input input');
            commentInput.value = `回复 ${userName}：`;
            commentInput.focus();
            
            // 滚动到评论框位置
            commentInput.scrollIntoView({ behavior: 'smooth' });
        });
    });
}

// 评论输入功能
function initCommentInput() {
    const commentInput = document.querySelector('.comment-input input');
    const sendBtn = document.querySelector('.send-btn');
    
    if (commentInput && sendBtn) {
        // 回车发送评论
        commentInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && this.value.trim()) {
                sendComment();
            }
        });
        
        // 点击发送按钮
        sendBtn.addEventListener('click', function() {
            if (commentInput.value.trim()) {
                sendComment();
            }
        });
        
        // 发送评论的函数
        function sendComment() {
            // 获取评论内容
            const commentText = commentInput.value.trim();
            
            // 模拟发送评论（实际项目中应通过API发送）
            showToast('评论发送成功，等待审核');
            
            // 清空输入框
            commentInput.value = '';
            
            // 更新评论计数
            updateCommentCount(1);
        }
        
        // 更新评论计数的函数
        function updateCommentCount(increment) {
            const countElem = document.querySelector('.comment-count');
            if (countElem) {
                const currentCount = parseInt(countElem.textContent.match(/\d+/)[0]);
                const newCount = currentCount + increment;
                countElem.textContent = `（${newCount}）`;
            }
        }
    }
}

// 文章链接点击功能
function initArticleLinks() {
    const articleItems = document.querySelectorAll('.related-articles .article-item');
    
    articleItems.forEach(item => {
        item.addEventListener('click', function() {
            // 获取文章标题，用于记录点击
            const title = this.querySelector('h3').textContent;
            console.log(`查看相关文章: ${title}`);
            
            // 在实际项目中，这里应该是跳转到对应文章的详情页
            // 但由于这是演示，我们只是重新加载当前页面
            showToast('正在跳转到相关文章...');
            
            // 延迟一下模拟加载
            setTimeout(() => {
                window.location.reload();
            }, 800);
        });
    });
}

// 底部导航功能
function initTabBar() {
    const tabItems = document.querySelectorAll('.tab-bar .tab-item');
    
    tabItems.forEach((tab, index) => {
        tab.addEventListener('click', function() {
            // 如果不是当前标签，才进行跳转
            if (!this.classList.contains('active')) {
                switch(index) {
                    case 0: // 首页
                        window.location.href = '../index.html';
                        break;
                    case 1: // 发现
                        window.location.href = 'discover.html';
                        break;
                    case 2: // 经纪人
                        window.location.href = 'agents.html';
                        break;
                    case 3: // 我的
                        window.location.href = 'profile.html';
                        break;
                }
            }
        });
    });
}

// 显示提示消息
function showToast(message) {
    // 检查是否已有toast，有则移除
    const existingToast = document.querySelector('.toast-message');
    if (existingToast) {
        document.body.removeChild(existingToast);
    }
    
    // 创建提示框元素
    const toast = document.createElement('div');
    toast.className = 'toast-message';
    toast.textContent = message;
    
    // 设置提示框样式（如果没有全局样式）
    if (!document.querySelector('style[data-toast]')) {
        toast.style.position = 'fixed';
        toast.style.top = '60px';
        toast.style.left = '50%';
        toast.style.transform = 'translateX(-50%)';
        toast.style.padding = '8px 16px';
        toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        toast.style.color = '#fff';
        toast.style.borderRadius = '4px';
        toast.style.zIndex = '1000';
        toast.style.opacity = '0';
        toast.style.transition = 'opacity 0.3s ease';
    }
    
    // 将提示框添加到body
    document.body.appendChild(toast);
    
    // 显示提示框
    setTimeout(() => {
        toast.style.opacity = '1';
    }, 10);
    
    // 2秒后隐藏并移除提示框
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, 300);
    }, 2000);
}

// 图片错误处理
function handleImageErrors() {
    const images = document.querySelectorAll('img');

    images.forEach(img => {
        img.addEventListener('error', function() {
            let imageType = 'generic';
            
            // 根据图片所在容器类型设置不同的替代图
            if (this.classList.contains('article-banner')) {
                imageType = 'banner';
            } else if (this.classList.contains('author-avatar') || this.classList.contains('user-avatar')) {
                imageType = 'avatar';
            } else if (this.closest('.article-img')) {
                imageType = 'article';
            }
            
            // 生成随机ID以获取不同图片
            const randomId = Math.floor(Math.random() * 1000);
            
            // 根据图片类型设置替代图
            switch(imageType) {
                case 'banner':
                    this.src = `https://source.unsplash.com/random/800x400/?ai,technology&sig=${randomId}`;
                    break;
                case 'avatar':
                    this.src = `https://i.pravatar.cc/150?img=${randomId % 70}`;
                    // 确保头像是圆形
                    this.style.objectFit = 'cover';
                    this.style.borderRadius = '50%';
                    break;
                case 'article':
                    this.src = `https://source.unsplash.com/random/300x200/?career,business&sig=${randomId}`;
                    break;
                default:
                    this.src = `https://source.unsplash.com/random/300x200/?business&sig=${randomId}`;
            }
            
            // 设置加载模式为立即加载
            this.loading = 'eager';
        });
    });
} 